<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ include file="/WEB-INF/page/include/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">

    <title>layout 后台大布局 - Layui</title>

    <link rel="stylesheet" href="${ctx }/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx }/css/font_eolqem241z66flxr.css" media="all"/>
    <link rel="stylesheet" href="${ctx }/css/list.css" media="all"/>
    <script>
        var ctx = "${ctx}";
    </script>

    <title></title>
</head>
<body>
<form action="" method="get">
<div style="background-color:#f2f2f2;">
    <!-- 内容主体区域 -->
    <div style="padding: 25px;width: 20px;">
        <div class="layui-container " style="background-color:#fbfbfb;width: 1670px;">
            <div class="layui-row " style="height: 90px;">
                <h1>物品信息</h1><br />
                    <span class="layui-breadcrumb" lay-separator="/">
						  <a href="">首页</a>
						  <a href="">报修管理</a>
						  <a href="">我的报修</a>
					</span>
            </div>
        </div>
    </div>

    <div style="padding: 20px;width: 15px;">
        <div class="layui-container " style="background-color:#fbfbfb;width: 1640px;height: 170px;">
            <div class="layui-row " style="padding:16px;color: #c2c2c2;">
                <span>查询条件</span>
                <hr>
                <div class="layui-row " style="padding: 30px;">
                    <div class="layui-col-md3 ">
                        <div class="layui-form-item  ">
                            <div class="layui-input-block ">
                                <input type="text" placeholder="请输入报修的ID" class="layui-input"/>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md4 ">
                        <div class="layui-form-item  ">
                            <div class="layui-input-block ">
                                <input type="text" name="title" placeholder="请输入报修人" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md3 ">
                        <div class="layui-form-item  ">
                            <div class="layui-input-block ">
                                <input type="text" name="title"  placeholder="请输入报修电话" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md1 layui-col-space1">
                        <span > </span>
                    </div>
                    <button type="button" class="layui-btn layui-btn-radius  layui-col-md1">查询</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 表格 -->
    <div style="padding: 20px;width: 15px;">
        <div class="layui-container " style="background-color:#fbfbfb;width: 1640px;height: 600px;">
            <div class="layui-row" style="padding:14px;color: #c2c2c2;">
                <span>报修信息</span>
                <hr>
                <div class="layui-row layui-col-space1" style="padding: 30px;">
                    <table class="layui-table" lay-skin="line" id="repairTab">

                    </table>，
                </div>
            </div>
        </div>
    </div>
</div>
</form>
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${ctx }/layui/layui.js"></script>
<script type="text/html" id="barEdit">
    <shiro:hasPermission name="user:user:update">
        <%--ID--%>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    </shiro:hasPermission>
    <shiro:hasPermission name="user:user:delete">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </shiro:hasPermission>
</script>
<script>
    layui
        .config({
            //配置js
            base: "js/"
        })
        .use(
            //引用
            ['form', 'layer', 'jquery', 'table', 'laydate'], function () {
                alert("请查看你的维修进度");
                var form = layui.form,
                    laydate = layui.laydate,
                    table = layui.table,//表ID
                    $ = layui.$;
               // $ = layui.jquery//Jquery  引用$


                //加载页面数据
                //table.render({})分页  分页增删改后reload实时刷新当前页面数据
                table.render({
                    id: 'repair',
                    elem: '#repairTab',//与表ID名对应
                    url: ctx + '/manger/dispatch/list',//数据接口
                    limit:10,//每页默认显示10行数据
                    limits:[10,20,30,40],//lay-ui显示的分页为假分页  真分页需要重载页
                    //列名
                    cols: [[{
                        field: 'id',//表头 表头id与封装类名字必须保持一致
                        width: 200,
                        title: '报修ID',
                        sort: true
                    }, {
                        field: 'repairType',
                        width: 200,
                        title: '报修类型'
                    }, {
                        field: 'repairName',
                        width: 200,
                        title: '报修人',
                        sort: true
                    }, {
                        field: 'phone',
                        width: 200,
                        title: '联系方式'
                    }, {
                        field: 'repairDate',
                        title: '预约时间',
                        minWidth: 200
                    },{
                        field: 'status',
                        title: '状态',
                        minWidth: 200
                    },{
                        title : '操作',
                        toolbar : '#barEdit'
                    }]
                    ],
                    //开启分页
                    page:true
                });

                //查询
                $(".search_btn").click(function () {
                    //执行重载
                    table.reload(
                        'repair',// 此处ID必须与table.render({})分页中的ID一致
                        {
                            page : {
                                curr : 1
                                //重新从第 1 页开始
                            },
                            //查询条件
                            where : {
                                //key: {
                                id : $("#repairID").val(),
                                buildNo : $("#repairname") .val(),
                                buildName : $("#repaircode") .val()
                            }
                        });
                });

                //监听工具条  监听的为render的ID名
                table.on('tool(repair)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'del') {
                        layer.confirm('真的删除行么', function (index) {
                            $.ajax({
                                url: ctx + '/manger/delete' //删除
                                    + data.id,
                                type: "get",
                                success: function (d) {
                                    if (d.code == 0) {
                                        obj.del();
                                    } else {
                                        //shiro权限认定
                                        layer.msg("权限不足！", {
                                            icon: 5
                                        });
                                    }
                                }
                            });
                            layer.close(index);
                        });
                    } else if (obj.event === 'edit') {//编辑楼宇信息--更改信息
                        alert("这是一个弹出层")
                        //弹出层--捕获页
                        layer.open({
                            type: 2,
                            title: "编辑报修信息",//方便用户对应修改
                            area: ['400px', '500px'],//弹出层信息
                            content: ctx + "/user/editUser/" //content捕获元素
                                + data.uid //这里content是一个普通的String
                        })
                    }

                });

            }); //end layui


    $(function () {
        $("#del").click(function(){

        })

        //添加文章
        $(".userAdd_btn").click(function () {
            var index = layui.layer.open({
                title: "添加文章",
                type: 2,
                content: ctx + "/user/addUser",
                success: function (layero, index) {

                }
            });
            //改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
            $(window).resize(function () {
                layui.layer.full(index);
            });
            layui.layer.full(index);
        });


        //格式化时间
        function formatTime(datetime, fmt) {
            if (datetime == null || datetime == 0) {
                return "";
            }
            if (parseInt(datetime) == datetime) {
                if (datetime.length == 10) {
                    datetime = parseInt(datetime) * 1000;
                } else if (datetime.length == 13) {
                    datetime = parseInt(datetime);
                }
            }
            datetime = new Date(datetime);
            var o = {
                "M+": datetime.getMonth() + 1, //月份
                "d+": datetime.getDate(), //日
                "h+": datetime.getHours(), //小时
                "m+": datetime.getMinutes(), //分
                "s+": datetime.getSeconds(), //秒
                "q+": Math.floor((datetime.getMonth() + 3) / 3), //季度
                "S": datetime.getMilliseconds()
                //毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (datetime.getFullYear() + "")
                    .substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1,
                        (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k])
                            .substr(("" + o[k]).length)));
            return fmt;
        }
    })
</script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</html>
